/**
 * 二次封装的 ListItem 组件
 * 
 */

/* eslint-disable @typescript-eslint/no-var-requires */
import React from 'react';
import styles from './index.module.less';
import { List } from 'antd-mobile-v2';

export interface Item {
  label: string;
  value?: string | number | JSX.Element;
}

interface Props {
  data: Array<Item>;
  [propsNames: string]: any;
}

const ListItem: React.FC<Props> = (props) => {
  return (
    <div className={styles['wrap']}>
      <List className={styles['list']}>
        {
          props.data.map((item, index) => (
            <List.Item key={index}>
              <div className={styles['list-item']}>
                <span className={styles['item-title']}>{item.label}</span>
                <span className={styles['item-content']}>{item.value}</span>
              </div>
            </List.Item>
          ))
        }
      </List>
    </div>
  );
};

export default ListItem;